/*公共的样式*/

*{
    box-sizing: border-box;
    /* 去除浏览器默认样式 */
    padding: 0;
    margin: 0;
}
html{
    height: 100%;
}

body{
    /* 相对路径 */
    background-image: url(../image/background.jpg
    );
    background-repeat: no-repeat;
    background-position: center center;
    background-size:cover;/*填满屏幕*/
    height: 100%;
}

/* 导航栏 */

.nav{
    width: 100%;
    height: 50px;
    /* background-color: rgb(50,50,50); */
    /*rgba设置出半透明效果*/
    background-color: rgb(50,50,50,0.4);
    color: white;
    display: flex;/*弹性布局*/
    align-items: center;

}
/*导航栏中的logo*/
.nav img{
    width: 40px;
    height: 40px;
    /*设置左右外边距*/
    margin-left: 30px;
    margin-right: 10px;
    border-radius: 20px;/*设置圆角矩形,变成圆形*/
}

.nav a{
    color: white;
    /*去掉下划线*/
    text-decoration: none;
    /* 此处使用内边距将多个链接分出间隔,用外边距也可以,但是内边距更好,可以扩大点击的范围 */
    padding:0 10px;
}
.nav .spacer{
    width: 70%;
}


/* 页面主体(版心) */
.container{

    /* 设置成固定宽度,并居中 */

    width: 1000px;
    /*上下无间距,左右自动*/
    margin: 0 auto;
    /* background-color: gray; */

    /* 设置高度(需要去掉导航栏的高度) */
    /* 这种写法是CSS3版本中的特性,但是减号两侧必须要加上空格 */
    height:calc(100% - 50px);

    display: flex;
    /* 让里面的元素能够等间距铺开(让留出来的空隙在中间) */
    justify-content: space-between;

    .container-left{
        width: 200px;
        height: 100%;
    }
    .container-right{
        /* 留出5px的空隙 */
        width: 795px;
        height: 100%;

        /* 加上一个白色半透明背景 */
        background-color:rgba(255,255,255,0.6);
        border-radius: 10px;
        padding: 20px;

        overflow: auto;
    }

    /* 设置用户信息区域 */
    .card{
        background-color:rgba(255,255,255,0.6);
        border-radius: 10px;
        padding: 40px;
    }

    /* 设置用户头像 */
    .card img{
        width: 120px;
        height: 120px;
        border-radius: 60px;
    }

    /* 设置用户名 */
    .card h3{
        text-align: center;
        padding: 10px;
    }

    /* 设置GitHub地址 */
    .card a{
        text-align: center;/*文字居中*/
        color: gray;
        text-decoration: none;
        /* 由于a 标签不是块级元素,因此文字居中没有效果,我们要把它转成块级元素 */
        display: block;
        margin-bottom: 10px;/*让a标签和下方有间隔*/
    }   
    /*设置文章栏*/
    .card .conter{
        display: flex;
        padding: 5px;
        justify-content: space-around;/*水平对齐方式*/
    }






}